<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户组权限管理</title>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'plugins/google-fonts/google.fonts.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
  <!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-responsive/css/responsive.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-buttons/css/buttons.bootstrap4.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
  <link rel="stylesheet" href="{% static 'dist/css/common.css'%}">
  <link rel="stylesheet" href="{% static 'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.min.css' %}">
  <!-- Bootstrap4 Duallistbox -->
  <link rel="stylesheet" href="{% static 'plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css' %}">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- 换行占位 -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <p> </p>
            </div>
        </div>
    </section>
    <!-- 用户组权限配置-->
    <section class="content">
        <div class="container-fluid">
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <div class="container-fluid">
                        <!--选择用户组-->
                        <form action="">
                            {% csrf_token  %}
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <select class="form-control" id="group_selected" style="width: 100%;">
                                            <option value=0 selected>请选择</option>
                                            {% for per in group_data %}
                                               <option value={{ per.id }}>{{  per.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-2">
                                    <button type="button" class="btn btn-block btn-primary" onclick="selectedGroupButton()">确认</button>
                                </div>
                            </div>
                         </form>
                        <!--配置用户组权限-->
                        <form action="">
                            {% csrf_token  %}
                            <div class="bootstrap-duallistbox-container row moveonselect moveondoubleclick">
                                <!--左边栏-->
                                <div class="box1 col-12">
                                    <select multiple="multiple" id="permission_multiple_id"  name="permision_multiple_name" style="height: 300px;">
                                      {% for per in permission_all %}
                                       <option value={{ per.id }}>{{ per }}</option>
                                      {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="container-fluid">
                                    <div class="row">
                                        <p> </p>
                                    </div>
                                </div>
                            <div class="row">
                                <div class="col-2">
                                  <div class="input-group">
                                     <button type="button" class="btn btn-block btn-success" onclick="saveGroupPermissionsButton()">保存</button>
                                  </div>
                                </div>
                            </div>
                        </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <!-- /.container-fluid -->
      </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap 4 -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- DataTables  & Plugins -->
<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/jszip/jszip.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/pdfmake.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/vfs_fonts.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.print.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.colVis.min.js' %}"></script>
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js' %}"></script>
<!-- Page specific script -->

<!--配置bootstrapDualListbox参数-->
<script>
    // 设置
    $('#permission_multiple_id').bootstrapDualListbox({
        nonSelectedListLabel: '可选权限',
        selectedListLabel: '已选权限',
        preserveSelectionOnMove: 'moved',
        moveOnSelect: true,                           //选中即添加
        moveSelectedLabel: "添加",
        moveAllLabel: '添加所有',
        removeSelectedLabel: "移除",
        removeAllLabel: '移除所有',
        infoText: '共{0}个权限',
        filterPlaceHolder:'过滤搜索',
        filterTextClear: '展示所有',
        showFilterInputs: true,
        infoTextEmpty:'列表为空',
        infoTextFiltered:'搜索到{0}个权限，共{1}个权限'
    })
</script>
<!--操作bootstrapDualListbox功能-->
<script type="text/javascript">
    //选择需要配置权限的用户组，初始化当前用户组的权限到多选栏中
    function selectedGroupButton(){
        var gSelected=document.getElementById("group_selected");        //获取select标签对象
        var gSelected_index=gSelected.selectedIndex;                    //获取选择的索引
        var g_id = gSelected.options[gSelected_index].value;            //获取被选择的用户组ID值
        var permission_multiple = document.getElementById("permission_multiple_id");   //获取多选控件的对象
        //恢复所有选项为初始值，即所有option都在左边未被选中
        for (var k = 0; k < permission_multiple.length; k++) {
            permission_multiple.options[k].selected = false;
        }
        $('#permission_multiple_id').bootstrapDualListbox('refresh');      //刷新显示
        //ajax请求当前组的权限并显示到界面
        $.ajax({
            url: "/basic/ajax_init_group_permissions/",
            type: "POST",
            data: {//请求参数
                groupId: g_id,
                "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
            },
            success: function (data) {
                if(data != null) {
                    if(data.length == 0){
                        alert("请选择用户组或配置初始权限！");
                    }
                    for (var i = 0; i < data.length; i++) {
                        for (var j = 0; j < permission_multiple.length; j++) {
                            if (permission_multiple.options[j].value == data[i]) {
                                permission_multiple.options[j].selected = true;
                            }
                        }
                    }
                    $('#permission_multiple_id').bootstrapDualListbox('refresh');
                }else{
                    alert("请选择用户组！");
                }
            },
            //请求失败后操作
            error: function (jqXHR, textStatus, err) {
                console.log(arguments);
            },
        })
    }
    //保存已经重新配置的用户组权限
    function saveGroupPermissionsButton(){
        var gSelected=document.getElementById("group_selected");        //获取select标签对象
        var gSelected_index=gSelected.selectedIndex;                    //获取选择的索引
        var g_id = gSelected.options[gSelected_index].value;            //获取被选择的用户组ID值
        if(g_id <=0 ){
            alert('请先选择需要配置的用户组，并配置相应权限');
            return;
        }
        var permission_multiple = document.getElementById("permission_multiple_id");   //获取多选控件的对象
        num = permission_multiple.length;
        var data_permissions = new Array();
        for (var i = 0; i < num; i++) {
            if(permission_multiple.options[i].selected == true) {
                data_permissions.push(permission_multiple.options[i].value)
            }
        }
        console.log(data_permissions)
        //ajax请求返回配置的数据
        $.ajax({
            url: "/basic/ajax_group_permissions_save/",
            type: "POST",
            data: {//请求参数
                groupId: g_id,
                permissionsId: JSON.stringify(data_permissions),
                "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
            },
            success: function (data) {
                if(data.code == 1000)
                    alert("权限数据配置成功！");
                else
                    alert("权限数据配置错误！");
            },
            //请求失败后操作
            error: function (jqXHR, textStatus, err) {
                console.log(arguments);
            },
        })
    }
</script>
</body>
</html>
